@import'./index.scss';

.content {
    .big-content {
        width: 14.6rem;
        margin: 0 auto;

        .title {
            width: 14.53rem;
            color: #010101;
            font-size: 0.75rem;
            font-weight: bold;
            margin-top: 1rem;
        }

        .icon {
            font-size: 0.5rem;
            color: #c5c5c5;
            padding-right: 0.4rem;
            text-align: right;
            line-height: 0.48rem;

            >img:nth-child(1) {
                width: 0.53rem;
                height: 0.48rem;
            }

            >img:nth-of-type(2) {
                width: 0.6rem;
                height: 0.35rem;
                padding-left: 1rem;
            }
        }

        .data {
            font-size: 0.5rem;
            padding-right: 0.4rem;
            text-align: right;
            margin-top: 0.2rem;

            span:nth-child(1) {
                color: #c5c5c5;
            }

            span:nth-child(2) {
                color: #b20000;
            }
        }

        .article {
            p {
                font-size: 0.5rem;
                color: #8b8b8b;
                line-height: 0.79rem;
                letter-spacing: 0.01rem;
                text-indent: 2em;
                margin-top: 1rem;
            }

            .p2 {
                font-size: 0.5rem;
                font-weight: bold;
                letter-spacing: 0.01rem;
                color: #000000;
                margin-top: 1rem;
            }

            .p3 {
                font-size: 0.5rem;
                color: #8b8b8b;
                line-height: 0.79rem;
                letter-spacing: 0.01rem;
                text-indent: 2em;
                margin-top: 1rem;
            }

            >img:nth-of-type(1) {
                width: 14.5rem;
                height: 6.78rem;
                object-fit: cover;
                margin-top: 0.2rem;
            }

            >img:nth-of-type(2) {
                width: 14.8rem;
                height: 4.18rem;
                object-fit: cover;
            }

            .p4 {
                margin: 0;
            }

            .p5 {
                margin-top: 0;
                color: #000000;
                font-weight: bold;
            }

            >img:nth-of-type(3) {
                width: 14.8rem;
                height: 6.85rem;
                object-fit: cover;
                margin-top: .5rem;
            }

            .p6 {
                text-indent: 0;
                margin-left: 1rem;
            }

            >img:nth-of-type(4) {
                width: 14.58rem;
                height: 4.25rem;
                object-fit: cover;
                margin-top: .5rem;
            }

            >img:nth-of-type(5) {
                width: 14.55rem;
                height: 6.03rem;
                object-fit: cover;
                margin-top: .4rem;
            }

            >img:nth-of-type(6) {
                width: 14.53rem;
                height: 7.48rem;
                object-fit: cover;
                margin-top: .4rem;
            }

            >img:nth-of-type(7) {
                width: 13.18rem;
                height: 6.93rem;
                object-fit: cover;
                margin-top: .4rem;
            }

        }
    }

    .middle {
        margin-top: 1rem;

        >div:nth-child(1) {
            width: 100%;
            height: 0.48rem;
            background-color: #efefef;
        }

        >div:nth-child(2) {
            width: 100%;
            height: 2rem;
            text-indent: 1em;

            >span:nth-child(1) {
                font-size: 0.53rem;
                color: #727171;
                font-weight: bold;
            }

            >span:nth-child(2) {
                font-size: 0.45rem;
                color: #727171;
            }
        }

        >div:nth-child(3) {
            width: 100%;
            height: 0.48rem;
            background-color: #efefef;
        }
    }

    .choice {
        font-size: 0.5rem;
        color: #8b8b8b;
        width: 100%;
        height: 4.7rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        img {
            width: 1.7rem;
            height: 1.7rem;
        }

        >div:nth-child(2) {
            padding-right: 1.3rem;
            padding-left: 1.3rem;
        }
    }

    .box {
        width: 14.58rem;
        height: 4.83rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #c9c9c9;

        >div:nth-child(1) {
            font-size: 0.5rem;
            color: #b20000;
            text-decoration: underline;
        }

        >div:nth-child(2) {
            font-size: 0.5rem;
            color: #8b8b8b;
        }
    }

    .publish {
        width: 9.88rem;
        height: 1.33rem;
        background-color: #b20000;
        margin: .8rem auto 1rem;
        font-size: 0.65rem;
        color: #ffffff;
        text-align: center;
        line-height: 1.33rem;
    }

    .three {
        font-size: 0.45rem;
        color: #727171;
        margin-left: .8rem;
    }

    .comment {
        width: 14.3rem;
        height: 13.3rem;
        margin: .63rem auto .57rem;
        border-bottom: 1px dashed gray;

        >div:nth-of-type(1) {
            display: flex;
            align-items: center;
        }

        >div:nth-of-type(1) img {
            width: 1.25rem;
            height: 1.25rem;
            padding-right: .5rem;
        }

        >div:nth-of-type(1)>div:nth-of-type(1) {
            font-size: 0.45rem;
            color: #444444;
            padding-right: .3rem;
        }

        >div:nth-of-type(1)>div:nth-of-type(2) {
            font-size: 0.45rem;
            color: #b2b2b2;
        }

        >div:nth-of-type(2) {
            display: flex;
            justify-content: space-between;
            margin-top: .5rem;
        }

        >div:nth-of-type(2)>div:nth-of-type(1) {
            font-size: 0.55rem;
            color: #444444;
        }

        >div:nth-of-type(2)>div:nth-of-type(2) {
            font-size: 0.45rem;
            color: #b2b2b2;
        }

        >div:nth-of-type(3) {
            font-size: 0.48rem;
            color: #444444;
            text-align: right;
            margin-top: .3rem;
        }

        .small {
            width: 13.38rem;
            height: 9.4rem;
            background-color: #fafafa;
            margin: .2rem auto .68rem;

            >div:nth-of-type(1),
            >div:nth-of-type(2) {
                height: 2.78rem;
                display: flex;
                border-bottom: 1px dashed gray;
                position: relative;
                box-sizing: border-box;
                padding-top: .5rem;
                box-sizing: border-box;
                padding-left: .5rem;
                img {
                    width: 1rem;
                    height: 1rem;
                    padding-right: .3rem;
                }

                div:nth-of-type(1) {
                    font-size: 0.45rem;
                    padding-right: .5rem;
                }

                div:nth-of-type(2) {
                    font-size: 0.45rem;
                    color: #444444;
                }

                div:nth-of-type(3) {
                    font-size: 0.45rem;
                    color: #b2b2b2;
                    position: absolute;
                    right: 0;
                    bottom: .2rem;
                }
            }

            >div:nth-of-type(3) {
                position: relative;
                box-sizing: border-box;
                padding-left: .48rem;
                padding-top: .4rem;

                input {
                    width: 12.43rem;
                    height: 1.8rem;
                    margin: 0 auto;
                    font-size: 0.5rem;
                    border: none;
                }

                >div:nth-of-type(1) {
                    width: 4.35rem;
                    height: 1.13rem;
                    background-color: #b20000;
                    font-size: 0.51rem;
                    color: #ffffff;
                    text-align: center;
                    line-height: 1.13rem;
                    position: absolute;
                    top: 2.4rem;
                    right: .4rem;
                }

                >div:nth-of-type(2) {
                    font-size: 0.3rem;
                    color: #b2b2b2;
                    position: absolute;
                    right: 0.8rem;
                    top: 1.2rem;
                }
            }
        }

        .last {
            height: 4.4rem;
            border-bottom: 1px solid #b2b2b2;

            >div:nth-of-type(1) {
                display: flex;
                align-items: center;
            }

            >div:nth-of-type(1) img {
                width: 1.25rem;
                height: 1.25rem;
                padding-right: .5rem;
            }

            >div:nth-of-type(1)>div:nth-of-type(1) {
                font-size: 0.45rem;
                color: #444444;
                padding-right: .3rem;
            }

            >div:nth-of-type(1)>div:nth-of-type(2) {
                font-size: 0.45rem;
                color: #b2b2b2;
            }

            >div:nth-of-type(2) {
                display: flex;
                justify-content: space-between;
                margin-top: .5rem;
            }

            >div:nth-of-type(2)>div:nth-of-type(1) {
                font-size: 0.55rem;
                color: #444444;
            }

            >div:nth-of-type(2)>div:nth-of-type(2) {
                font-size: 0.45rem;
                color: #b2b2b2;
            }

            >div:nth-of-type(3) {
                font-size: 0.48rem;
                color: #444444;
                text-align: right;
                margin-top: .3rem;
            }
        }

        .load {
            height: 2rem;
            text-align: center;
            font-size: 0.55rem;
            color: #bbbbbb;
            line-height: 2rem;
        }
    }
}